import React from 'react';
import { Radio, Button, Spin, message } from 'antd';
import { inject, observer } from 'mobx-react';
import ModeTriggerView from '../modetrigger/index'
import '../joinCube/index.less'

@inject("edcExcelJoinCubeStore")
@observer
export default class ModeCheck extends React.Component {
    constructor(props) {
        super(props);
        this.store = props.edcExcelJoinCubeStore;
		this.store.getAppModeInfo(props.app);
    }

    render() {
        const { changeType } = this.props
        const { modeTabs,selectModeTab,changModeTab,pageExpandId } = this.store;
        return (
            <div className="edc-excel-joinCube">
                <div className="excelTab">
                    <Radio.Group ecId={`${this && this.props && this.props.ecId || ''}_undefined@fer0fp`} value={selectModeTab} onChange={changModeTab} >
                        {modeTabs.map(tab=><Radio.Button ecId={`${this && this.props && this.props.ecId || ''}_undefined@c35w2u@${tab.id}`} value={tab.id}>{tab.name}</Radio.Button>)}
                    </Radio.Group>
                </div>
                <div>
                    <ModeTriggerView ecId={`${this && this.props && this.props.ecId || ''}_ModeTriggerView@10pbod`} modeId={selectModeTab} pageExpandId={pageExpandId} changeType={changeType} linkType={'joinCube'} />
                </div>
            </div>
        );
    }
}